<template>
  <div class="eco-region-map">
    <el-row :gutter="36" class="region-main-row">
      <el-col :span="14" class="map-col">
        <el-card class="map-card">
          <div class="region-map-title">修复区域分布示意</div>
          <div ref="mapRef" class="region-map-chart"></div>
        </el-card>
      </el-col>
      <el-col :span="10" class="table-col">
        <el-card class="table-card">
          <div class="region-map-title">区域明细</div>
          <el-table :data="regionList" border height="100%">
            <el-table-column prop="name" label="区域" width="90px"/>
            <el-table-column prop="area" label="面积(㎡)" width="110px"/>
            <el-table-column prop="leader" label="负责人" width="80px"/>
            <el-table-column prop="rate" label="进度" width="110px">
              <template #default="scope">
                <el-progress :percentage="scope.row.rate" :color="scope.row.color" :stroke-width="14"/>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注"/>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'

// 区域数据
const regionList = [
  { name: 'A区', area: 24000, leader: '张三', rate: 98, color: '#67C23A', remark: '已完成' },
  { name: 'B区', area: 20800, leader: '李四', rate: 75, color: '#409EFF', remark: '' },
  { name: 'C区', area: 16300, leader: '王五', rate: 58, color: '#E6A23C', remark: '难点攻关' },
  { name: 'D区', area: 12500, leader: '赵六', rate: 36, color: '#F56C6C', remark: '进度偏慢' },
  { name: 'E区', area: 13200, leader: '钱七', rate: 82, color: '#67C23A', remark: '' },
  { name: 'F区', area: 17100, leader: '孙八', rate: 61, color: '#409EFF', remark: '' },
  { name: 'G区', area: 11800, leader: '周九', rate: 45, color: '#E6A23C', remark: '待材料到场' },
  { name: 'H区', area: 14700, leader: '吴十', rate: 90, color: '#67C23A', remark: '' }
]

// ECharts 区域分布
const mapRef = ref<HTMLDivElement>()
function genBubbleData() {
  // 给每个区域分配一个位置（演示可随机，实际可按地理坐标或自定义）
  return regionList.map((r, i) => [
    Math.round(Math.random() * 80 + 10),   // X
    Math.round(Math.random() * 70 + 20),   // Y
    r.area,
    r.name,
    r.leader,
    r.rate
  ])
}
onMounted(() => {
  nextTick(() => {
    if (mapRef.value) {
      const chart = echarts.init(mapRef.value)
      chart.setOption({
        title: { text: '修复区域空间分布（示意）', left: 'center', top: 10, textStyle: { fontSize: 18, color: '#409EFF' } },
        tooltip: { 
          trigger: 'item',
          formatter: (params:any) => (
            `<b>${params.data[3]}</b><br/>
            面积：${params.data[2]} ㎡<br/>
            进度：${params.data[5]}%<br/>
            负责人：${params.data[4]}`
          )
        },
        xAxis: { show: false, min: 0, max: 100 },
        yAxis: { show: false, min: 0, max: 100 },
        grid: { left: 0, right: 0, top: 36, bottom: 0 },
        series: [{
          type: 'scatter',
          symbol: 'circle',
          symbolSize: (val:any) => Math.sqrt(val[2]) * 1.7,
          data: genBubbleData(),
          itemStyle: {
            color: (params:any) => regionList[params.dataIndex].color,
            opacity: 0.7,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: true,
            formatter: (params:any) => regionList[params.dataIndex].name,
            color: '#222',
            fontWeight: 'bold',
            fontSize: 16
          },
          emphasis: { scale: 1.18 }
        }]
      })
      window.addEventListener('resize', () => chart.resize())
    }
  })
})
</script>

<style scoped>
.eco-region-map {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: linear-gradient(120deg,#f8fff7 60%,#e6f7ff 100%);
  overflow: hidden;
}
.region-main-row {
  height: calc(100vh - 54px); /* 适配有头部时，实际高度可根据你项目自定义 */
}
.map-col, .table-col {
  height: 100%;
}
.map-card, .table-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.region-map-title {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 18px;
  color: #308d2d;
}
.region-map-chart {
  flex: 1;
  min-height: 340px;
  height: calc(100vh - 170px);
}
.el-table {
  height: 100% !important;
  min-height: 340px;
}
</style>
